<template>
  <div class="v-storeAge">
    <Card :bordered="true" class="pb30">
      <p slot="title">到店年龄比例</p>
      <div slot="extra">
          <Dropdown trigger="custom" :visible="visible" class="v-dropdown" @on-clickoutside="handleClose" style="min-width: 240px;" placement="top-end">
            <span @click="handleOpen">
                门店筛选
                <Icon type="arrow-down-b"></Icon>
            </span>
            <DropdownMenu slot="list">
                <CheckboxGroup v-model="areaNameCheck">
                    <Checkbox v-for="(item, index) in searchAreas" :key="index" :label="item.areaName"></Checkbox>
                </CheckboxGroup>
                <div style="text-align: right; margin:10px;">
                    <Button type="primary" @click="handleSubmit">确定</Button>
                </div>
            </DropdownMenu>
          </Dropdown>
      </div>
      <div id="chartStoreAge"></div>
    </Card>
  </div>
</template>

<script>
import { mapState } from 'vuex'
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');
export default {
  name: "v-storeAge",
  props: {
  },
  data () {
    return {
      sexualDate: [],
      searchAreas: [],
      areaName: '',
      areaCode: '',
      visible: false,
      areaNameCheck: [],
      myChart: null
    }
  },
  computed: {
    ...mapState({
      sideBarWidth: state => state.sideBarWidth,
      getAjaxParams: state => state.timeParams,
      selectedAge: state => state.selectedAge,
      curAgeGroup: state => state.curAgeGroup
    })
  },
  watch: {
    getAjaxParams(val) {
      if (this.areaCode !== '') {
        this.SexualDate(Object.assign({}, val, {areaCodes: this.areaCode}, {ageID: this.selectedAge}))
        this.$store.dispatch('SetDownLink', Object.assign({}, val, {areaCodes: this.areaCode}, {ageID: this.selectedAge}))
      }
    },
    selectedAge(val) {
      if (this.areaCode !== '') {
        this.SexualDate(Object.assign({}, this.getAjaxParams, {areaCodes: this.areaCode}, {ageID: val}))
        this.$store.dispatch('SetDownLink', Object.assign({}, this.getAjaxParams, {areaCodes: this.areaCode}, {ageID: val}))
      }
    },
    sideBarWidth (val) {
      setTimeout(() => {
        this.myChart.resize()
      }, 200)
    }
  },
  created () {
    this.SearchAreas()
  },
  methods: {
    SexualDate (params) {
      this.$store.dispatch('SpinShow', true)
      this.$store.dispatch('SexualDate', params).then((res) => {
        if (res.success === '1') {
          this.$store.dispatch('SpinShow', false)
          this.sexualDate = res.data.sort((a, b) => {
            return Number(a.MallNo.split('-')[2]) - Number(b.MallNo.split('-')[2])
          })

          let legend = [this.curAgeGroup.age1, this.curAgeGroup.age2, this.curAgeGroup.age3, this.curAgeGroup.age4, this.curAgeGroup.age5]
          let yAxis = []
          let arrAge1 = []
          let arrAge2 = []
          let arrAge3 = []
          let arrAge4 = []
          let arrAge5 = []
          for (let i in this.sexualDate) {
            yAxis.push(this.sexualDate[i].AreaName)
            if (this.sexualDate[i].enters === 0) {
              arrAge1.push(0)
              arrAge2.push(0)
              arrAge3.push(0)
              arrAge4.push(0)
              arrAge5.push(0)
            } else {
              arrAge1.push((100 * this.sexualDate[i].age1 / this.sexualDate[i].enters).toFixed(2))
              arrAge2.push((100 * this.sexualDate[i].age2 / this.sexualDate[i].enters).toFixed(2))
              arrAge3.push((100 * this.sexualDate[i].age3 / this.sexualDate[i].enters).toFixed(2))
              arrAge4.push((100 * this.sexualDate[i].age4 / this.sexualDate[i].enters).toFixed(2))
              arrAge5.push((100 * this.sexualDate[i].age5 / this.sexualDate[i].enters).toFixed(2))
            }
          }
          this.$nextTick(() => {
            this.drawChartBar('chartStoreAge', legend, yAxis, arrAge1, arrAge2, arrAge3, arrAge4, arrAge5)
          })
        }
      })
    },
    SearchAreas () {
      this.$store.dispatch('SearchAreas').then((res) => {
        if (res.success === '1') {
          this.searchAreas = res.data
          let _areaNameCheck = []
          let _areaCode = []
          this.searchAreas.map((item) => {
            _areaNameCheck.push(item.areaName)
            _areaCode.push(item.areaCode)
          })
          this.areaNameCheck = _areaNameCheck
          this.areaCode = _areaCode.join(',')
          this.areaName = this.areaNameCheck.join(',')
          this.$store.dispatch('SetDownLink', Object.assign({}, this.$store.state.timeParams, {areaCodes: this.areaCode}, {ageID: this.selectedAge}))
          this.SexualDate(Object.assign({}, this.$store.state.timeParams, {areaCodes: this.areaCode}, {ageID: this.selectedAge}))
        }
      })
    },
    handleOpen () {
      this.visible = true
    },
    handleClose () {
      this.visible = false
    },
    handleSubmit () {
      let _areaCode = []
      this.areaNameCheck.map((item) => {
        this.searchAreas.map((subItem) => {
          if (item === subItem.areaName) {
            _areaCode.push(subItem.areaCode)
          }
        })
      })
      this.areaName = this.areaNameCheck.join(',')
      this.areaCode = _areaCode.join(',')
      this.SexualDate(Object.assign({}, this.$store.state.timeParams, {areaCodes: this.areaCode}, {ageID: this.selectedAge}))
      this.$store.dispatch('SetDownLink', Object.assign({}, this.$store.state.timeParams, {areaCodes: this.areaCode}, {ageID: this.selectedAge}))
      this.visible = false
    },
    drawChartBar (id, legend, yAxis, arrAge1, arrAge2, arrAge3, arrAge4, arrAge5) {
      this.myChart = echarts.init(document.getElementById(id))
      this.myChart.setOption({
        color: ['#4472c4', '#ed7d31', '#a5a5a5', '#ffc000', '#5b9bd5'],
        tooltip : {
          trigger: 'axis',
          axisPointer : {
            type : 'shadow'
          },
          formatter: (params) => {
            let res = `<p>${params[0].axisValue}</p>`
            params.map((item) => {
              res += `<p>${item.marker} ${item.seriesName}：${item.value}%</p>`
            })
            return res
          }
        },
        legend: {
          itemWidth: 10,
          itemHeight: 10,
          bottom: 10,
          itemGap: 40,
          data: legend
        },
        grid: {
          left: '160px',
          // top: '10px',
          // right: '20px',
          bottom: '86px'
        },
        xAxis:  {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            formatter: '{value} %'
          },
          max: 100
        },
        yAxis: {
          type: 'category',
          splitLine: {
            lineStyle: {
              color: '#f0f0f0'
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#999'
            }
          },
          data: yAxis
        },
        series: [
          {
            name: this.curAgeGroup.age1,
            type: 'bar',
            stack: '总量',
            barWidth: 23,
            label: {
              normal: {
                show: true,
                position: 'inside',
                formatter: function(params) {
                  if (Number(params.value) === 0) {
                    return '' 
                  } else {
                    return params.value + '%'
                  }
                }
              }
            },
            data: arrAge1
          },
          {
            name: this.curAgeGroup.age2,
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'inside',
                formatter: function(params) {
                  if (Number(params.value) === 0) {
                    return '' 
                  } else {
                    return params.value + '%'
                  }
                }
              }
            },
            data: arrAge2
          },
          {
            name: this.curAgeGroup.age3,
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'inside',
                formatter: function(params) {
                  if (Number(params.value) === 0) {
                    return '' 
                  } else {
                    return params.value + '%'
                  }
                }
              }
            },
            data: arrAge3
          },
          {
            name: this.curAgeGroup.age4,
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'inside',
                formatter: function(params) {
                  if (Number(params.value) === 0) {
                    return '' 
                  } else {
                    return params.value + '%'
                  }
                }
              } 
            },
            data: arrAge4
          },
          {
            name: this.curAgeGroup.age5,
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'inside',
                formatter: function(params) {
                  if (Number(params.value) === 0) {
                    return '' 
                  } else {
                    return params.value + '%'
                  }
                }
              }
            },
            data: arrAge5
          }
        ]
      }, true)
      setTimeout(() => {
        window.onresize = this.myChart.resize
      }, 200)
    }
  }
};
</script>

<style lang="less">
.v-storeAge {
    margin: 0 -6px;
    .v-dropdown {
      text-align: right
    }
    .ivu-dropdown-menu {
      width: 240px;
      padding: 10px 15px;
    }
    .ivu-checkbox-group {
      text-align: left;
    }
    .ivu-card-head p, .ivu-card-head-inner {
        height: 32px;
        line-height: 32px;
        font-size: 24px;
    }
    .ivu-card-head {
        padding: 30px 20px;
        border-bottom: none;
    }
}
.v-storeAge {
  #chartStoreAge {
    width: 100%;
    min-height: 820px;
  }
}
</style>
